<template>
  <div>
    <h1>
      App:当前是第{{ pageInfo.current }}页,当前每页是{{ pageInfo.limit }}条
    </h1>

    <!-- 
      因为单项数据的原因，子组件无法直接修改父组件的数据
      如果在子组件中一定要修改父组件的数据，可以在父组件中封装一个函数，修改自己的数据，把这个函数传递给子组件，子组件调用即可修改父组件数据（子组件就可以让父组件自己修改自己的数据）


     -->
    <Pagination
      :pageInfo="pageInfo"
      :changeCurrent="changeCurrent"
      :changeLimit="changeLimit"
    />
  </div>
</template>

<script>
import Pagination from "./components/Pagination";
export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      pageInfo: {
        current: 1,
        limit: 5,
        total: 6,
      },
    };
  },
  methods: {
    changeCurrent(current) {
      this.pageInfo.current = current;
    },
    changeLimit(limit) {
      this.pageInfo.limit = limit;
    },
  },
};
</script>

<style></style>
